import React from "react"
import ReactQuill, {Quill} from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import {WhiteSpace, WingBlank} from "antd-mobile";
import styles from "./Mail.css"
import ImageUploader from '@looop/quill-image-uploader'
import reqwest from "reqwest"

Quill.register('modules/imageUploader', ImageUploader)

export default class My extends React.Component {
    constructor(props) {
        super(props)
        this.state = {text: ''} // You can also pass a Quill Delta here
        this.handleChange = this.handleChange.bind(this)
    }

    modules = {
        toolbar: [
            [{'header': [1, 2, false]}],
            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
            [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
            ['link', 'image'],
            ['clean']
        ],
        imageUploader: {
            upload: file => {
                console.log(123123)
                return new Promise((resolve, reject) => {
                    reqwest({
                        url: "http://api.tjxl.vooo.xyz/upload?format=json",
                        method: "post",
                        headers:{
                            'Content-Disposition':'attachment;filename=upload.jpg'
                        },
                        // crossOrigin: true,
                        // contentType: "application/json",
                        processData: false,
                        data: file,
                        success: (res) => {
                            console.log(res)
                            resolve("http://api.tjxl.vooo.xyz/"+res.url)
                        },
                        error: (err) => {
                            console.log(err);
                        }
                    });
                });
            }
        }
    }

    formats = [
        'header',
        'bold', 'italic', 'underline', 'strike', 'blockquote',
        'list', 'bullet', 'indent',
        'link', 'image', 'imageBlot'
    ]

    handleChange(value) {
        console.log(value)
        this.setState({text: value})
    }

    render() {
        return (
            <div>
                <WhiteSpace/>
                <WingBlank>
                    <div style={{width: '100%', height: '100%', textAlign: "center"}}>
                        <ReactQuill value={this.state.text}
                                    className={styles.quill}
                                    modules={this.modules}
                                    formats={this.formats}
                                    onChange={this.handleChange}/>
                        <img onClick={this.goTo} style={{paddingTop: '8%', paddingBotton: '8%', width: '72%'}}
                             src="/img/tj/资源 28@2x.png" alt=""/>
                    </div>
                </WingBlank>
            </div>
        )
    }

    goTo = () => {
        localStorage.setItem('text', this.state.text)
        console.log(this.state.text)
        this.props.history.push('/mail/info')
    }
}